<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<div th:replace="common/common::html"></div>
<head>
    <meta charset="UTF-8">
    <title th:text="#{register.title}"></title>
    <script th:inline="javascript">
        $(function () {
            // 验证码倒计时功能
            let countdown = 60;
            $("#get-code-btn").click(function () {
                let mobile = $("input[name='mobile']").val();
                if (!/^1[3-9]\d{9}$/.test(mobile)) {
                    alert(/*[[#{register.mobile.valid}]]*/'');
                    return;
                }

                let btn = $(this);
                btn.attr("disabled", true);
                btn.text(countdown + "s后重新获取");

                // 发送获取验证码请求
                $.ajax({
                    type: "post",
                    url: /*[[@{/register/sendCode}]]*/'',
                    data: {mobile: mobile},
                    success: function(data) {
                        if (!data.success) {
                            alert(data.msg);
                            btn.attr("disabled", false);
                            btn.text(/*[[#{register.get.code}]]*/'');
                            countdown = 60;
                        }
                    }
                });

                let timer = setInterval(function () {
                    countdown--;
                    btn.text(countdown + "s后重新获取");
                    if (countdown <= 0) {
                        clearInterval(timer);
                        btn.attr("disabled", false);
                        btn.text(/*[[#{register.get.code}]]*/'');
                        countdown = 60;
                    }
                }, 1000);
            });

            // 表单提交验证
            $("#register-submit-btn").click(function () {
                let mobile = $("input[name='mobile']").val();
                let code = $("input[name='verifyCode']").val();
                let username = $("input[name='username']").val();
                let password = $("input[name='password']").val();

                // 手机号验证
                if (!/^1[3-9]\d{9}$/.test(mobile)) {
                    alert(/*[[#{register.mobile.valid}]]*/'');
                    return;
                }

                // 验证码验证
                if (!code || code.length !== 6) {
                    alert(/*[[#{register.code.valid}]]*/'');
                    return;
                }

                // 用户名验证（至少4位）
                if (!username || username.length < 4) {
                    alert(/*[[#{login.user.name.plch}]]*/''); // 复用登录页的提示信息
                    return;
                }

                // 密码验证（至少6位）
                if (!password || password.length < 6) {
                    alert(/*[[#{login.password.plch}]]*/''); // 复用登录页的提示信息
                    return;
                }

                // 提交表单
                $("#register-form").submit();
            });
        })
    </script>
    <style>
        /* 可复用登录页面的样式或自定义 */
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 50px;
        }
        .form-container {
            width: 300px;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-control {
            width: 100%;
            padding: 8px;
            margin-top: 5px;
        }
        #get-code-btn {
            width: 40%;
            margin-left: 5px;
        }
        .mobile-group {
            display: flex;
        }
        .mobile-group input {
            width: 60%;
        }
    </style>
</head>
<body>
<div class="form-container">
    <h3 th:text="#{register.title}"></h3>
    <form id="register-form" method="post" th:action="@{/register/submit}">
        <!-- 新增：用户名输入框 -->
        <div class="form-group">
            <span th:text="#{login.user.name}"></span>
            <input class="form-control" name="username"
                   th:placeholder="#{login.user.name.plch}"
                   pattern="^.{4,}$" required>
        </div>

        <!-- 新增：密码输入框 -->
        <div class="form-group">
            <span th:text="#{login.user.password}"></span>
            <input class="form-control" name="password" type="password"
                   th:placeholder="#{login.password.plch}"
                   pattern="^.{6,}$" required>
        </div>

        <!-- 原有：手机号和验证码 -->
        <div class="form-group mobile-group">
            <span th:text="#{user.mobile}"></span>
            <input class="form-control" name="mobile" type="tel"
                   th:placeholder="#{user.mobile}" pattern="^1[3-9]\d{9}$" required>
            <button type="button" id="get-code-btn" class="btn btn-default"
                    th:text="#{register.get.code}"></button>
        </div>

        <div class="form-group">
            <span th:text="#{register.verify.code}"></span>
            <input class="form-control" name="verifyCode" type="text"
                   th:placeholder="#{register.code.plch}" pattern="^\d{6}$" required>
        </div>

        <button id="register-submit-btn" class="btn btn-success"
                th:text="#{register.submit}"></button>
    </form>
</div>
</body>
</html>